<template>
  <a-row type="flex" align="top" class="courseslider">
    <!-- :style="{ height: containerHeight }" -->
    <a-col :span="4" class="pre pre--sider">
      <pre-collapse ref="collapse"></pre-collapse>
    </a-col>
    <a-col :span="20" class="pre">
      <pre-context
        @refreshCourseHours="refreshCourseHours"
        @getCourseHour="putCourseHour"
        :courseHours="coursehoursTemp"
      ></pre-context>
      <!-- <pre-context></pre-context> -->
    </a-col>
  </a-row>
</template>

<script>
import PreCollapse from "./PreCollapse";
import PreContext from "./PreContext";
export default {
  components: { PreCollapse, PreContext },
  data() {
    return {
      coursehoursTemp: [],
    };
  },
  methods: {
    refreshCourseHours(){
      this.$refs.collapse.getCourseHour();
    },
    putCourseHour() {
      this.coursehoursTemp = this.$refs.collapse.coursehours;
    },
  },
  mounted() {
    // :courseHours="this.$refs.collapse.coursehours"
  },
  computed: {},
};
</script>

<style scoped>
.courseslider {
  /* height: calc(100% - 64px); */
  height: 100%;
}
.pre {
  overflow-y: auto;
  height: 100%;
}
.pre--sider {
  background-color: #f9f7f6;
  border-right: 1px solid #eee;
}
</style>
